<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="./date.css" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
      crossorigin="anonymous"
    />
    <script src="./date.js" type="text/javascript" charset="utf-8"></script>
    <script src="../utils/jquery-3.6.0.min.js"></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
      integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
      crossorigin="anonymous"
    ></script>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body,
      html {
        height: 100%;
      }
      #date {
        display: flex;
        justify-content: center;
      }

      #inputdate {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="date">
      <input type="text" value="" placeholder="点击选择日期" id="inputdate" />
      <input type="date" name="" id="">
    </div>

    <!-- <div> -->
      <!-- Nav tabs -->
      <!-- <ul id="myTabs" class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
          <a href="#home" aria-controls="home" role="tab" data-toggle="tab"
            >Home</a
          >
        </li>
        <li role="presentation">
          <a
            href="#profile"
            aria-controls="profile"
            role="tab"
            data-toggle="tab"
            >Profile</a
          >
        </li>
        <li role="presentation">
          <a
            href="../pages/login.html"
            aria-controls="messages"
            role="tab"
            data-toggle="tab"
            >Messages</a
          >
        </li>
        <li role="presentation">
          <a
            href="#settings"
            aria-controls="settings"
            role="tab"
            data-toggle="tab"
            >Settings</a
          >
        </li>
      </ul> -->

      <!-- Tab panes -->
      <!-- <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="home"><img src="../images/医疗服务1.gif" alt=""></div>
        <div role="tabpanel" class="tab-pane fade" id="profile"><img src="../images/医疗服务2.jpg" alt=""></div>
        <div role="tabpanel" class="tab-pane fade" id="messages"><img src="../images/医疗服务3.jpg" alt=""></div>
        <div role="tabpanel" class="tab-pane fade" id="settings"><img src="../images/医疗服务5.webp" alt=""></div>
      </div>
    </div> -->

    <!-- <ul class="nav nav-tabs"> -->
      <!-- <li role="presentation" class="dropdown"> -->
        <!-- <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> -->
          <!-- Dropdown <span class="caret"></span> -->
        <!-- </a> -->
        <!-- <ul class="dropdown-menu">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </li> 
    </ul>-->
    <script type="text/javascript">
      var d = new DateJs({
        inputEl: "#inputdate",
        el: "#date",
      });
      console.log(d);

      $("#myTabs a").click(function (e) {
        e.preventDefault();
        $(this).tab("show");
      });
    </script>
  </body>
</html>
